<script setup lang="ts">
import backImg from '@/assets/img/top.jpg'
import MyIcon from "@/components/MyIcon.vue";
import {bingImgUrl} from "@/apis/bingWallpaper";
// import {blobToBase64, blobToDataURI} from "@/utils/common";
// import {VsLoadingFn} from "vuesax-alpha";

const showElement =ref(true)
const randomBackImg = ref<string>()

onMounted(()=> {
  getRandomImg()
})
const router = useRouter()
function goHome() {
  router.push({
    name:'Home'
  })
}
function getRandomImg(){
  // bingWallpaper.getRandomWallpaper().then(res=> {
  //   console.log(blobToBase64(res.data as any as Blob,'image/png'))
  //   const loadingInstance = VsLoadingFn()
  //   blobToDataURI(res.data as any as Blob,(url: string)=> {
  //     randomBackImg.value = url || backImg
  //     loadingInstance.close();
  //   });
  // }).finally(()=> {
  //   showElement.value = true
  // })
  randomBackImg.value = bingImgUrl
}
</script>

<template>
  <div class="main-background">
    <transition-group name="fade">
      <img v-if="randomBackImg" :src="randomBackImg || backImg" class="main-img">
      <img v-else-if="!randomBackImg" :src="backImg" class="main-img">
    </transition-group>
    <div class="main-content">
      <vs-row class="introduce-group" justify="center">
        <vs-tooltip>
          <transition name="topTip">
            <vs-button v-if="showElement" shape="circle" size="xl" color="#55b47f"
                       animation-type="vertical"
                       :active="true"
                       type="floating" @click="goHome">
              <span class="main-title">阿天的百宝箱</span>
              <template #animate>
                <i class="bx bx-home-alt" />
              </template>
            </vs-button>
          </transition>
          <template #content> 戳我打开新世界 </template>
        </vs-tooltip>

      </vs-row>
      <div class="bottom-area">
          <transition name="inBtn" >
                  <span class="bottom-btn" v-show="showElement">
                    <vs-tooltip placement="top">
                                <vs-button shape="circle"
                                           color="#55b47f"
                                           class="in-btn"
                                           upload
                                           type="border"
                                           @click="goHome"
                                >
            <my-icon name="ChevronLeftDouble"></my-icon>
          </vs-button>
                              <template #content> 戳我 </template>
                    </vs-tooltip>

        </span>
          </transition>

      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.introduce-group{
  position: absolute;
  top: 20vh;
  display: flex;
  justify-content: center;
  width: 80%;
  margin-left: 10%;
}
.main-background{
  height: 100vh;
  position: relative;
  width: 100vw;
  overflow: hidden;
}
.main-content{
  height: 100%;
  width: 100%;
  position: relative;
}
.bottom-area{
  position: absolute;
  bottom: 1vh;
  text-align: center;
  width: 100%;
  .bottom-btn{
    display: inline-block;
    animation: bounce 1.4s ease-in infinite;
    animation-delay: 0.6s;
    .in-btn{
      transform: rotateZ(-45deg);
    }
  }
}
.topTip-enter-active{
  animation: bounceInDown 1s linear 1;
}
.topTip-leave-active {
  //animation: bounce 0.6s ease-in infinite;
}
.inBtn-enter-active{
  animation: bounceInDown 0.6s ease-in 1;
}
.inBtn-leave-active {
  //animation: bounce 0.6s ease-in infinite;
}
.main-title{
  font-size: 20px;
}
.fade-enter-active {
  animation: fadeIn 0.5s 1 ease;
}

.fade-leave-active {
  animation: fadeOut 0.5s 1 ease;
}
</style>